import { zhooks } from 'ym-design'
const { useRequest } = zhooks

function getUsername(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Math.random() + '@name');
    }, 200);
  });
}

function HookUseRequestLoadingDelay() {
  const action = useRequest(getUsername);

  const withLoadingDelayAction = useRequest(getUsername, {
    loadingDelay: 300,
  });

  const trigger = () => {
    action.run();
    withLoadingDelayAction.run();
  };

  return (
    <div>
      <button type="button" onClick={trigger}>
        run
      </button>

      <div style={{ margin: '24px 0' }}>Username: {action.loading ? 'Loading...' : action.data}</div>
      <div>Username: {withLoadingDelayAction.loading ? 'Loading...' : withLoadingDelayAction.data}</div>
    </div>
  );
}

export default HookUseRequestLoadingDelay;